<template>
  <div class="member-order-page">

    <xtx-tabs v-model="activeName" @tab-click="clickTab">

      <xtx-tabs-panel v-for="item in orderStatus" :key="item.name" :name="item.name" :label="item.label"></xtx-tabs-panel>
    </xtx-tabs>

    <div class="order-list" v-if="orderList">
      <order-item v-for="item in orderList" :key="item.id" :order="item"></order-item>
    </div>

    <div v-else class="loading"></div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { orderStatus } from '@/api/constants.js'
import OrderItem from '@/views/member/order/components/order-item'
import { findOrderList } from '@/api/order.js'
export default {
  name: 'member-order',

  components: {
    OrderItem
  },

  setup () {
    const activeName = ref('all')

    const clickTab = name => {
      console.log(name)
    }

    // 查询订单参数
    const requestParams = reactive({
      page: 1,
      pageSize: 5,
      orderState: 0
    })
    // 订单列表
    const orderList = ref([])
    // 查询订单
    findOrderList(requestParams).then(data => {
      orderList.value = data.result.items
    })
    // return { activeName, tabClick, orderTabs, orderList }

    return { activeName, clickTab, orderStatus, orderList }
  }
}
</script>

<style lang="less" scoped>

.order-list {
  background: #fff;
  padding: 20px;
}

</style>
